<template>
  <div style="border: 1px solid #ccc; min-height: 60%">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode"/>
    <Editor style="height: 50%; overflow-y: hidden;" v-model="editorContent"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
            @onChange="onChange"
            @onDestroyed="onDestroyed"
    />
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {h, shallowRef} from "vue";
import {Boot} from '@wangeditor/editor'
import markdownModule from '@wangeditor/plugin-md'
import {mapActions, mapState} from "vuex";
export default {
  name: "AlterEditor",
  props:['contentData'],
  components:{
    Editor, Toolbar
  },
  data(){
    return{
      toolbarConfig:{},
      editorConfig:{},
      editorRef:{},
      mode: 'default',
      editorContent:''
    }
  },
  computed:{

  },
  methods:{

    onCreated(editor){
      this.editorRef = editor

    },
    // 编辑器内容 调用
    onChange(editor){

    },

    // 销毁调用
    onDestroyed(editor){

      editor.clear()
    }
  },
  beforeMount() {
    // 初始化编辑器配置
    this.editorRef = shallowRef()
    this.toolbarConfig = {}
    this.editorConfig={
      placeholder: '请输入内容...',
      MENU_CONF: {}
    }
    this.editorConfig.scroll = false
    // 添加 markdown 支持
    Boot.registerModule(markdownModule)

  },
  beforeUnmount() {
    if (this.editorRef!=null){
      this.editorRef.destroy()
    }
  },
  watch:{
    contentData:{
      handler(value){

      }
    }
  }
}
</script>

<style scoped>

</style>